<template>
    <view class="page-order bg-content">
        <view class="order" v-for="(tbOrder, index) in dataList" :key="tbOrder.id">
            <view class="top">
                <view class="left" @click="navigateTo('/pages/common/store/index', {storeId: tbOrder.tbStore.id})">
                    <u-icon name="/pages/sub/sub1-tabs/static/icon/shop.png" :size="40" color="rgb(94,94,94)"></u-icon>
                    <view class="store">{{ tbOrder.tbStore.name }}</view>
                    <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                </view>
            </view>
            <view class="item" v-for="(tbOrderGoods, i) in tbOrder.tbOrderGoodsList" :key="tbOrderGoods.id">
                <view class="left">
                    <image :src="tbOrderGoods.image ? tbOrderGoods.image + '?imageView2/1/w/300/h/300' : '/pages/sub/sub1-tabs/static/default-image/goods.jpg'"
                           mode="aspectFill"></image>
                </view>
                <view class="content">
                    <view class="title u-line-2">{{ tbOrderGoods.title }}</view>
                    <view class="type">
                        {{tbOrderGoods.specName}}<label v-if="tbOrderGoods.colorId">;{{tbOrderGoods.colorName}}</label>

                        <view style="display: flex;">
                            <div style="color: grey; font-size: 12px; padding-top: 24px; width: 100%;">
                                {{tbOrderGoods.disabledText}}
                            </div>
                            <div class="right">
                                <u-button plain :type="tbOrderGoods.disabled ? 'default' : 'error'" size="medium" :key="tbOrderGoods.id"
                                          :custom-style="{'width': '80px'}" :disabled="tbOrderGoods.disabled"
                                          @click="navigateTo_(`/pages/sub/sub1-tabs/tabs/person/goods-after-sale/goods-after-sale-apply/goods-after-sale-apply-add/index`, null, tbOrder, tbOrderGoods)">
                                    申请售后
                                </u-button>
                            </div>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <div style="padding-top: 10px; padding-bottom: 10px;">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>
    </view>
</template>

<script>

    import {TbOrderService} from "@/dev/services/tb-order.service";

    export default {
        data() {
            return {
                dataList: [],
                searchKeyword: '',
            }
        },
        methods: {
            navigateTo_(url, urlParams, tbOrder, tbOrderGoods) {
                this.navigateTo(url, urlParams, {tbOrder, tbOrderGoods});
            },
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbOrderService().findTableListCascadeByGoodsAfterSaleApply({
                    pagination: this.pagination,
                    data: {
                        communityId: this.globalVariable.userInfo.tbCommunity.id,
                        userId: this.globalVariable.userInfo.id,
                        status: '3,4',
                        orderBy: 'create_time desc',
                        searchKeyword: this.searchKeyword
                    }
                }).then(result => {
                    _self.pagination.refreshPage(result);
                    result.list.forEach((tbOrder, index) => {
                        tbOrder.tbOrderGoodsList.forEach((tbOrderGoods, innerIndex) => {
                            let disabled = false;
                            let disabledText = '';
                            if (!tbOrderGoods.isEnableGoodsAfterSaleApply) {
                                disabled = true;
                                disabledText = '该商品未提供售后服务';
                            } else if (tbOrderGoods.isGoodsAfterSaleApplying) {
                                disabled = true;
                                disabledText = '该商品售后处理中';
                            } else if (tbOrderGoods.quantity === tbOrderGoods.alreadyGoodsAfterSaleApplyRefundQuantity) {
                                disabled = true;
                                disabledText = '该商品售后服务已完成';
                            } else if (!tbOrderGoods.isNoExpireGoodsAfterSaleApply) {
                                disabled = true;
                                disabledText = '该商品已超过售后期';
                            }
                            tbOrderGoods.disabled = disabled;
                            tbOrderGoods.disabledText = disabledText;
                        });
                    });
                    _self.dataList = [..._self.dataList, ...result.list];
                    console.log(_self.dataList)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
